<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="地址" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="address">
              <a-input v-model="model.address"  placeholder="请输入地址" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="地图" :labelCol="labelCol2" :wrapperCol="wrapperCol2" >
              <baidu-map
                @click="aaaa"
                class="map"
                ak="N8XFZUHHsxCZemKp59Vj1SHC3ospmndk"
                @moveend="changeCenter"
                @zoomend="changeZoom"
                :center="center"
                :zoom="zoom"
                @ready="handler"
                :scroll-wheel-zoom="true"
              >
                <bm-local-search
                  class="search"
                  :keyword="model.address"
                  :auto-viewport="false"
                  :page-capacity="0"
                  :zIndex="100000"
                  style="display: none"
                ></bm-local-search>
                <bm-marker
                  :position="marker"
                  :dragging="true"
                  :zIndex="10000">
                </bm-marker>
              </baidu-map>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="经度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lng">
              <a-input v-model="model.lng" placeholder="请输入经度" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="纬度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lat">
              <a-input v-model="model.lat" placeholder="请输入纬度" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="楼宇名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
              <a-input v-model="model.title" placeholder="请输入名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="12">
            <a-form-model-item label="总楼层" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="floor">
              <a-input-number v-model="model.floor" placeholder="请输入总楼层" style="width: 100%" />
            </a-form-model-item>
          </a-col>-->
          <a-col :span="12">
            <a-form-model-item label="层高m" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="floorHeight">
              <a-input-number v-model="model.floorHeight" placeholder="请输入层高" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="总面积m²" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="totalArea">
              <a-input-number v-model="model.totalArea" placeholder="请输入总面积" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="12">
            <a-form-model-item label="可租面积m²" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enableArea">
              <a-input-number v-model="model.enableArea" placeholder="请输入可租面积" style="width: 100%" ></a-input-number>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="12">
            <a-form-model-item label="单层面积m²" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="singleArea">
              <a-input-number v-model="model.singleArea" placeholder="请输入单层面积" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="租金(元/m²/月)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rent">
              <a-input v-model="model.rent" placeholder="请输入租金" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="装修类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="decorationType">
              <j-dict-select-tag type="list" v-model="model.decorationType" dictCode="zxType" placeholder="请选择装修类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="停车位(个)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carSite">
              <a-input-number v-model="model.carSite" placeholder="请输入停车位" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="运营时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startDate">
              <j-date placeholder="请选择运营时间" v-model="model.startDate"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="物业费(元/m²/月)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wyRent">
              <a-input-number v-model="model.wyRent" placeholder="请输入物业费" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
              <a-input-number v-model="model.sort" placeholder="请输入排序" style="width: 100%" />
            </a-form-model-item>
          </a-col>

          <!--<a-col :span="12">
            <a-form-model-item label="置顶状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isTop">
              <j-dict-select-tag type="radio" v-model="model.isTop" dictCode="top_flag" placeholder="请选择置顶状态" />
            </a-form-model-item>
          </a-col>-->
          <!--<a-col :span="12">
            <a-form-model-item label="自持类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="selfType">
              <j-dict-select-tag type="list" v-model="model.selfType" dictCode="zcType" placeholder="请选择自持类别" />
            </a-form-model-item>
          </a-col>-->
          <a-col :span="12">
            <a-form-model-item label="承重(kg)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cz">
              <a-input-number v-model="model.cz" placeholder="请输入承重" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="消防等级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="level">
              <j-dict-select-tag type="list" v-model="model.level" dictCode="level" placeholder="请选择消防等级" />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="封面" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="img">
              <j-image-upload  v-model="model.img" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="轮播" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="bannar">
              <j-image-upload isMultiple  v-model="model.bannar" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="简介" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="introduction">
              <a-textarea v-model="model.introduction" rows="4" placeholder="请输入简介"  ></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="配套" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="pt">
              <a-textarea v-model="model.pt" rows="4" placeholder="请输入配套" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="交通" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="traffic">
              <a-textarea v-model="model.traffic" rows="4" placeholder="请输入交通" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="详情" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="richText">
              <j-editor v-model="model.richText" />
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import {BaiduMap, BmAutoComplete, BmLocalSearch, BmMarker,BmlCurveLine,BmCircle,BmPolyline,BmOverlay,BmLabel} from 'vue-baidu-map'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'SxzBuildingForm',
    components: {
      BaiduMap,
      BmLocalSearch,
      BmMarker
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      //判断是否抽屉页面
      drawer: {
        type: Boolean,
        default: false,
        required: false
      },
      //关联字段
      mainId: {
        type: String,
        default: '',
        required: false
      }
    },
    data () {
      return {
        model:{
          mainId:this.mainId,
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        confirmLoading: false,

        map: {
          lng: '',
          lat: '',
          zoom: 13,
        },
        marker: {
          lng: '',
          lat: '',
        },
        center: {
          lng: '',
          lat: '',
        },
        keyword: '',
        searchList: [],
        center: { lng: 117.290574, lat: 34.212666 },
        zoom: 13,

        validatorRules: {
           title: [
              { required: true, message: '请输入名称!'},
           ],
           floor: [
              { required: true, message: '请输入总楼层!'},
           ],
           totalArea: [
              { required: true, message: '请输入总面积!'},
           ],
          enableArea: [
              { required: true, message: '请输入可租面积!'},
           ],
           floorHeight: [
              { required: true, message: '请输入层高!'},
           ],
          wyRent: [
              { required: true, message: '请输入物业费!'},
           ],
          sort: [
              { required: true, message: '请输入排序号!'},
           ],
          /* rent: [
              { required: true, message: '请输入租金!'},
           ],*/
           singleArea: [
              { required: true, message: '请输入单层面积!'},
           ],
          decorationType: [
              { required: true, message: '请选择装修情况!'},
           ],
           introduction: [
              { required: true, message: '请输入简介!'},
           ],
           pt: [
              { required: true, message: '请输入配套!'},
           ],
           traffic: [
              { required: true, message: '请输入交通!'},
           ],
           address: [
              { required: true, message: '请输入地址!'},
           ],
           lat: [
              { required: true, message: '请选择地址!'},
           ],
           bannar: [
              { required: true, message: '请输入轮播!'},
           ],
           img: [
              { required: true, message: '请输入封面!'},
           ],
           isTop: [
              { required: true, message: '请输入置顶状态!'},
           ],
        },
        url: {
          add: "/building/add",
          edit: "/building/edit",
          queryById: "/building/queryById",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {

      handler({ BMap }) {
        this.BMap = BMap;
        this.marker={
          lng: this.model.lng,
          lat: this.model.lat,
        };
        if(this.model.lng){
          this.center={
            lng: this.model.lng,
            lat: this.model.lat,
          };
        }

      },
      aaaa(type, target, point, pixel, overlay){
        this.$set(this.model,"lng",type.point.lng);
        this.$set(this.model,"lat",type.point.lat);
        this.marker = {
          lng: type.point.lng,
          lat: type.point.lat,
        };
      },
      //地图中心点
      changeCenter(e) {
        this.map = {
          lng: e.target.getCenter()['lng'],
          lat: e.target.getCenter()['lat'],
          zoom: e.target.getZoom(),
        };
      },
      //地图层级改变
      changeZoom(e) {
        this.map = {
          lng: this.center['lng'],
          lat: this.center['lat'],
          zoom: e.target.getZoom(),
        };
      },

      //地图搜索取点列表
      searchLocation(e) {
        this.searchList = [];
        this.searchList = e;
        if (this.searchList.length > 0) {
          //移动标记点,移动到地图中心点
          //设置标记点
          this.marker = {
            lat: this.map.lat,
            lng: this.map.lng,
          };
        }
      },
      //地图取点
      getLocationPoint(e) {
        //移动标记点
        this.marker = {
          lng: e.point['lng'],
          lat: e.point['lat'],
        };
      },



      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        console.log("edit")
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (!valid) {
            that.$emit('error');//销毁提交按钮的loading
          }else{
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.$emit('error');//销毁提交按钮的loading
            })
          }
        })
      },
    }
  }
</script>

<style>
  .map {
    width: 100%;
    height: 300px;
  }
  .search {
    height: 300px;
    overflow: auto;
  }
</style>